<template>
	<table>
		<thead>
			<tr>
				<th v-for="(value, key) in res.headInfo" :key="key">
					{{ value }}
				</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in res.data" :key="item.id">
				<td v-for="(value, key) in res.headInfo" :key="key">{{ item[key] }}</td>
			</tr>
		</tbody>
	</table>
</template>

<script>
    export default {
        data() {
            return {
                res: {
                    headInfo: {
                        id: '序号',
                        age: '年龄',
                        name: '姓名',
                    },
                    data: [
                        {
                            id: 1,
                            name: 'zhangsan',
                            age: 18,
                        },
                        {
                            id: 2,
                            name: 'lisi',
                            age: 21,
                        },
                        {
                            id: 3,
                            name: 'wangwu',
                            age: 32,
                        },
                        {
                            id: 4,
                            name: 'liuliu',
                            age: 22,
                        },
                    ],
                },
            };
        },
    };
</script>

<style scoped>
    table {
        width: 200px;
        height: 200px;
        border-left: 1px solid red;
        border-top: 1px solid red;
        border-spacing: 0;
    }
    th,
    td {
        border-right: 1px solid red;
        border-bottom: 1px solid red;
    }
</style>